<template>
    <div class="container">
      <div class="table">
        <el-table :data="tableData" stripe>
          <el-table-column label="课程Id" prop="id" />
          <el-table-column label="课程名" prop="name" />
          <el-table-column label="年级" prop="grade" />
          <el-table-column label="学分" prop="credit" />
          <el-table-column label="上课时间" prop="time" />
          <el-table-column label="上课地点" prop="location" />
          <el-table-column label="选课人数" prop="selectedCount" />
          <el-table-column label="管理课程" prop="examDate">
            <template #default="scope">
            <a @click="goToCourse(scope.row)" style="cursor: pointer;">
              管理
            </a>
          </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
import { list } from "../../api/teacher/course";
// import { useRouter } from "vue-router"; // 确保没有 "/composables"
import { ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance(); // 获取当前实例
//   const router = useRouter(); // 正确使用路由实例
  const tableData = ref([]);  // 使用 ref 创建响应式数据
  
  // 跳转到课程详情页的方法
  const goToCourse = (row) => {
    proxy.$router.push({ path: `/courseManage/${row.id}` });
  };
  
  // 获取课程列表
  const getList = async () => {
    const res = await list();
    tableData.value = res; // 更新响应式数据
  };
  
  // 在组件挂载时调用 getList
  onMounted(() => {
    getList();
  });
  </script>
  
  <style scoped></style>
  